<template>
  <div id="avtively" style="overflow-x: scroll">
    <h4>添加活动</h4>
    <br />
    <el-input
      v-model="actively.activelyTitle"
      placeholder="请输入活动标题"
    ></el-input>
    <br /><br />
    <el-date-picker
      v-model="actively.activelyDate"
      type="date"
      placeholder="选择日期"
    >
    </el-date-picker>
    <br /><br />
    <el-button @click="addActively"> 添加活动 </el-button>

    <!-- style="width:1000px" -->
    <el-calendar class="custom-calendar">
      <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
      <template slot="dateCell" slot-scope="{ data }">
        <small> {{ data.day }} </small>
        <br />
        <el-tag
          class="my-tag"
          :key="item._id"
          v-for="item in activelys"
          @close="deleteActively(item._id)"
          :closable="userInfo.permission > 1"
          v-show="new Date(data.day).getTime() === item.activelyDate"
          :color="'#' + Math.floor(Math.random() * 0xffffff).toString(16)"
          effect="dark"
          size="mini"
        >
          {{ item.activelyTitle }}
        </el-tag>
      </template>
    </el-calendar>
  </div>
</template>

<script>
import { nanoid } from "nanoid";

import { mapState } from "vuex";

import {
  useGetActivelys,
  useDeleteActively,
  useAddActively,
} from "@/hooks/actively";

export default {
  name: "Actively",
  computed: {
    ...mapState("user", ["userInfo"]),
  },
  data() {
    return {
      actively: {
        activelyNo: nanoid(),
        activelyTitle: "",
        activelyDate: "",
      },
      activelys: [],
    };
  },
  mounted() {
    (async () => {
      this.activelys = (await useGetActivelys())?.data?.activelys;
    })();
  },
  methods: {
    deleteActively(_id) {
      this.$confirm("确认取消次活动?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
             const resInfo = (await useDeleteActively(_id));
             if(resInfo.code === 201 && resInfo.message === "success"){
                  this.$message.success("删除成功")
                   this.activelys = (await useGetActivelys())?.data?.activelys;
             }else{
                  this.$message.error(resInfo.message)
             }
        })
        .catch(() => {
        });
    },
    async addActively() {
      if (
        this.actively.activelyTitle.length === 0 ||
        this.actively.activelyDate.length === 0
      ) {
        this.$message.error("请将内容填写完整在添加");
      } else {
        const d = new Date(this.actively.activelyDate);
        const date =
          d.getFullYear() +
          "-" +
          (d.getMonth() + 1) +
          "-" +
          d.getDate() +
          " 08:00:00";
        this.actively.activelyDate = new Date(date).getTime();
        const resInfo = await useAddActively(this.actively);
        if (resInfo.code === 201 && resInfo.message === "success") {
          this.$message.success("添加成功");
          this.activelys = (await useGetActivelys())?.data?.activelys;
        } else {
          this.$message.error(resInfo.message);
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.custom-calendar /deep/ td {
  overflow-y: scroll;
}
.custom-calendar /deep/ td::-webkit-scrollbar {
  width: 5px;
  background-color: #eee;
}

.custom-calendar /deep/ td::-webkit-scrollbar-thumb {
  background-color: #ccc;
}

.my-tag {
  margin-right: 5px;
}
</style>
